<template>
  <el-card
    class="box-card"
  >
    <a-spin :spinning="confirmLoading">
      <ants-form-container :disabled="formDisabled">
        <a-form slot="detail" :form="form">
          <a-row>
            <a-col :span="24">
              <a-form-item label="标题" :label-col="labelCol2" :wrapper-col="wrapperCol2">
                <a-input v-decorator="['title', validatorRules.title]" placeholder="请输入标题"/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="收件人" :label-col="labelCol2" :wrapper-col="wrapperCol2">
                <a-input v-decorator="['addressees', validatorRules.addressees]" placeholder="请输入标题"/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="附件" :label-col="labelCol2" :wrapper-col="wrapperCol2">
                <ants-upload v-decorator="['uploadFile']" :trigger-change="true" bizPath="ants-mailFile"/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item>
                <quill-editor
                  ref="myQuillEditor"
                  v-decorator="['content',{trigger:'input'}]"
                  style="height: 350px;width: 90%;margin: auto;"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </ants-form-container>
    </a-spin>
    <div align="center">
      <el-button type="primary" style="margin-top: 90px" @click="submitForm()">{{
          $t('mailTool.btn.sendMail')
        }}
      </el-button>
    </div>
  </el-card>
</template>

<script>
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {postAction} from '@/api/manage'
import AntsUpload from '@/components/ants/AntsUpload'
import AntsMarkDown from '@/components/ants/AntsMarkDown'
import pick from 'lodash.pick'
import AntsFormContainer from '@/components/ants/AntsFormContainer'

export default {
  name: 'SendMail',
  components: {
    quillEditor,
    AntsUpload,
    AntsFormContainer
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + '/sys/common/upload', // 图片上传路径
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 6}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      labelCol2: {
        xs: {span: 24},
        sm: {span: 3}
      },
      wrapperCol2: {
        xs: {span: 24},
        sm: {span: 20}
      },
      validatorRules: {
        title: {
          rules: [
            {required: true, message: '请输入标题!'}
          ]
        },
        addressees: {
          rules: [
            {required: true, message: '请输入收件人!'}
          ]
        }
      },
      url: {
        add: '/sys/user/add',
        edit: '/sys/user/edit'
      },
      confirmLoading: false,
      viewValue: ''
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    }
  },
  mounted() {
  },
  methods: {
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const formData = Object.assign(this.model, values)
          postAction('/mail/tool/', formData).then((resp) => {
            if (resp.success) {
              this.$message.success(resp.message)
              that.confirmLoading = false
              this.form.setFieldsValue({})
            }
          }).catch((resp) => {
            that.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
